<template>
  <div style="background: #f8f8f8; min-height: calc(100vh - 200px)">
    <!-- 导航条以及外壳 -->
    <div style="width: 1200px; padding: 20px 0; margin: 0 auto">
      <a-breadcrumb separator=">">
        <a-breadcrumb-item href="" @click.native="$router.push('/')">首页</a-breadcrumb-item>
        <a-breadcrumb-item href="" @click.native="$router.push('/education/educationHome')"> 教育培训 </a-breadcrumb-item>
        <a-breadcrumb-item style="color: #FFBE37">企业培训</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="top">
      <a-input
        v-model="trainName"
        placeholder="请输入关键字"
        class="searchInput"
      />
      <div class="searchIcon" @click="inputsel()">
        <img src="@/assets/image/icon1.png" alt="" />
        <span>搜索</span>
      </div>
    </div>
    <div class="conder">
      <div class="cOsingleCF">
        <div>
          <span class="x5TXt">状态：</span>
        </div>
        <div style="margin-left: 24px">
          <ul>
            <li
              @click="selColor(null)"
              :class="{ sconColor: selnumber == null }"
            >
              全部
            </li>
            <li
              :class="{ sconColor: selnumber == index + 1 }"
              @click="selColor(index + 1)"
              v-for="(item, index) in stateList"
              :key="index"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
      </div>
      <!-- 职位展示区域 -->
      <div class="coRsingleCF">
        <div
          class="listDiv"
          @click="getJumptrainDetails(item.trainNo)"
          v-for="(item, index) in enterpriseList"
          :key="index + 'sas'"
        >
          <div class="image1">
            <img :src="imageWebUrl + item.cover" @error="$event.target.src = GLOBAL.defaultCover " alt="" />
            <span
              style="top: -136px"
              v-if="item.statusTxt != '已结束'"
              class="stateLabel"
            >
              进行中</span
            >
            <span
              style="top: -136px; background-color: #cccccc"
              v-else
              class="stateLabel"
              >已结束</span
            >
          </div>
          <div>
            <span class="titleTxt1 lineSingle">
              {{ item.comName }}
            </span>
            <div style="margin-top: 8px">
              <span v-for="i in item.labels" :key="i" class="squareLabel">{{
                i
              }}</span>
            </div>
            <span class="timeTxt1" style="margin-top: 16px"
              >培训时间：{{ item.startTime }} - {{ item.endTime }}</span
            >
            <div class="cOicon-id" style="margin-top: 16px">
              <img
                class="imgagesOne"
                :src="imageWebUrl + item.comLogo"
                 @error="$event.target.src = GLOBAL.defaultIconImg "
                alt=""
              />
              <p>{{ item.comName }}</p>
            </div>
          </div>
        </div>
      </div>
      <a-empty
        :image="imgUrl"
        :image-style="{
          height: '220px',
        }"
        style="margin: 0 auto; margin: 68px"
        v-if="enterpriseList.length < 1"
      />
    </div>
    <div class="cnBottom" v-if="enterpriseList.length > 1">
      <div style="margin: 0 auto; width: 230px">
        <a-button @click="more()" v-show="btnState == 1" class="sobtn"
          >点击加载更多</a-button
        >
         <a-button v-show="btnState == 2" :loading="true"  class="sobtn">正在加载中</a-button>
        <span class="timeTxt1" v-if="btnState == 3">没有更多了</span>
      </div>
    </div>
    <Loading v-show="onLoading"></Loading>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 怕版权影响换张图片
      imgUrl: require("@/assets/image/pagint.png"),
      msgons: "",
      mosgolor: 1,
      selnumber: null,
      btnState: 1,
      stateList: [
        {
          id: 1,
          name: "进行中",
        },
        {
          id: 2,
          name: "未开始",
        },
        {
          id: 3,
          name: "已结束",
        },
      ],
      enterpriseList: [],
      // 搜索关键字
      trainName: "",
      // 接口关键字段
      status: null,
      pageIndex: 1,
      onLoading:false
    };
  },
  methods: {
     // 跳转培训详情页
    getJumptrainDetails(e) {
      // 查询详情的接口是公用的，所以传id里面显示内容不一样传type，2都是企业培训，3都是职业培训
      this.$router.push("/education/trainDetails?id=" + e + "&type=" + 2);
    },
    // 选中样式函数
    selColor(e) {
      this.trainName = "";
      this.enterpriseList = [];
      // console.log(e);
      this.selnumber = e;
      if (e == null) {
        this.status = null;
        this.enterprise(this.pageIndex);
      } else {
        this.status = "0" + e;
        this.enterprise(this.pageIndex);
      }
    },
    // 加载更多
    more() {
      this.btnState = 2;
      this.pageIndex++;
      this.enterprise(this.pageIndex);
    },
    // 输入框的回调
    inputsel(e) {
      if (e.data == null) {
        this.pageIndex=1;
        this.enterpriseList = [];
        this.enterprise(1);
      }
    },
    search() {
      this.KnowledgeList = [];
      this.getKnowledgeList();
    },
    // 查询企业培训更多页列表
    enterprise(e) {
      this.onLoading = true
      let ber = [];
      this.$ajax({
        url: "/educational/traininginfo/list/enterprise",
        method: "post",
        params: {
          status: this.status, //状态：01.进行中，02.未开始，03.已结束，空为全部,
          trainName: this.trainName, //培训名称
          pageSize: 8,
          pageIndex: e,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.onLoading = false
          ber = res.data.list;
          for (var i in ber) {
            this.enterpriseList.push(ber[i]);
          }
          if (res.data.totalPage >=  this.pageIndex) {
            this.btnState = 3;
          } else {
            this.btnState = 1;
          }
        } else {
          this.onLoading = false
          this.enterpriseList = [];
          return false;
        }
      });
    },
  },
  mounted() {
    this.enterprise(this.pageIndex);
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
//  自己写
//input框内文字修改
::-webkit-input-placeholder {
  font-size: 15px;
  font-family: PingFangSC-Regular;
  color: #999999 !important;
}
.top {
  width: 1200px;
  margin: 0 auto;
  display: flex;
}
.titleTxt1 {
  font-weight: 600;
  margin-top: 6px;
  width: 360px;
}
// 中间部分样式
.conder {
  width: 1200px;
  margin: 0 auto;
  margin-top: 30px;
  .listDiv {
    width: 590px;
    height: 190px;
    background: #ffffff;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
    padding: 20px 12px;
    float: left;
    margin-left: 20px;
    margin-bottom: 24px;
    display: flex;
    cursor: pointer;
    .image1 {
      margin-right: 20px;
      width: 217px;
      overflow: hidden;
      img {
        width: 217px;
        height: 150px;
      }
    }
  }
  .listDiv:nth-child(2n-1) {
    margin-left: 0px;
  }
}
.timeTxt1{
  text-align: center;
}
</style>
